<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets" template="/template/main.xhtml">

	<ui:define name="body">
		<h:form prependId="false">
			<p:toolbar>
				<p:toolbarGroup align="left">
					<p:commandButton value="#{messages['button.save']}" action="#{productEditMB.insert}"
						rendered="#{!productEditMB.updateMode}" ajax="false" />
					<p:commandButton value="#{messages['button.save']}" action="#{productEditMB.update}"
						rendered="#{productEditMB.updateMode}" ajax="false" />
					<p:commandButton value="#{messages['button.delete']}" onclick="confirmation.show()"
						rendered="#{productEditMB.updateMode}" type="button" immediate="true" ajax="false" />
					<p:confirmDialog message="#{messages['label.confirm.delete']}" showEffect="bounce" hideEffect="explode"
						header="#{messages['label.dialog.delete']}" severity="alert" widgetVar="confirmation">
						<h:commandButton value="#{messages['button.dialog.yes']}" action="#{productEditMB.delete}" immediate="true"
							ajax="false" />
						<h:commandButton value="#{messages['button.dialog.no']}" onclick="confirmation.hide()" type="button" />
					</p:confirmDialog>
				</p:toolbarGroup>
			</p:toolbar>

			<br />

			<p:fieldset legend="#{messages['product.label']}" toggleable="true" toggleSpeed="500">
				<h:panelGrid id="fields" columns="3">
					<h:outputLabel>Enviar Arquivo: </h:outputLabel>
					<p:fieldset legend="#{messages['product.label.images']}" toggleable="true" toggleSpeed="500">
						<!--  
						<h:panelGrid id="fieldsPhone" columns="1">
							<p:commandButton value="Add..." action="#{contactEditMB.addPhone}" update="listPhone"
								disabled="#{!securityContext.hasPermission('contact', 'update')}" />
						</h:panelGrid>
						-->
						<p:fileUpload label="Enviar Imagem" id="image" 
							fileUploadListener="#{productEditMB.processFileUpload}"
							description="Imagens"							
							auto="true"/>
					
						<p:dataTable id="imageList" var="image" value="#{productEditMB.images}" rowIndexVar="index">
							<p:column>												
								<h:graphicImage value="#{image.getFullPath()}"/>
							</p:column>
							<p:column>
								<f:facet name="header"></f:facet>
								<p:commandButton value="#{messages['button.delete']}" action="#{productEditMB.deleteImage}" ajax="false"
									disabled="#{!securityContext.hasPermission('contact', 'update')}" />
							</p:column>					
						</p:dataTable>
					</p:fieldset>
					<p:message for="image" />									
				
					<h:outputLabel value="#{messages['product.label.itemname']}: " for="itemname" styleClass="text-input" />
					<h:inputText id="itemname" value="#{productEditMB.bean.itemName}"
						title="#{messages['product.alt.itemname']}" />
					<p:message for="itemname" />
				
					<h:outputLabel value="#{messages['product.label.description']}: " for="description" styleClass="text-input" />
					<h:inputText id="description" value="#{productEditMB.bean.description}"
						title="#{messages['product.alt.description']}" />
					<p:message for="description" />
					
					<h:outputLabel value="#{messages['product.label.quantity']}: " for="quantity" styleClass="text-input" />
					<h:inputText id="quantity" value="#{productEditMB.bean.quantity}"
						title="#{messages['product.alt.quantity']}" />
					<p:message for="quantity" />
					
					<h:outputLabel value="#{messages['product.label.price']}: " for="price" styleClass="text-input" />
					<h:inputText id="price" value="#{productEditMB.bean.price}"
						title="#{messages['product.alt.price']}" />
					<p:message for="price" />
					
				</h:panelGrid>
			</p:fieldset>
		</h:form>
	</ui:define>
</ui:composition>